import React,{useState, useEffect} from 'react'
import {connect} from 'dva'
import {NavBar, List,InputItem, Icon,Modal} from 'antd-mobile';
import { Link } from 'umi';
import './order.less'
function Order(props) {
    const {dispatch,shop,order,address} = props;
    console.log(address);
    const [formData, setFormData] = useState({
        num: 1,//商品数量
        address:'',//发货地址
        totalPrice:0//总金额
    })
    const handleSetFormData = (key, value) =>{
        formData[key] = value;
        setFormData({...formData});
    }
    useEffect(() => {
        let id = props.history.location.query.id;
        
        dispatch({type:'shop/findById',payload:id})//查商品详情
        dispatch({type:'address/getListForPage',payload:{pno:1, psize:1}})//查默认地址
        
    }, [])
    useEffect(() => {
        if(Object.keys(shop.formData).length > 0){
            handleSetFormData('name',shop.formData.name);
            handleSetFormData('goodsId',shop.formData.id);
            handleSetFormData('singlePrice',Math.round(shop.formData.price * shop.formData.zheKou/10)*100/100);
            handleSetFormData('singlePriceOld',shop.formData.price);
            handleSetFormData('zheKou',shop.formData.zheKou);
        }
    }, [shop.formData])
    useEffect(() => {
        let list = address.list;//
        if(list.length==0){//如果长度是0说明这个用户下没有配送地址
            handleSetFormData('address','');
        }else if(list[0].default == 0){
            handleSetFormData('address','');
        }else{
            handleSetFormData('address',list[0].province +"/"+list[0].city+"/"+list[0].area+"/"+list[0].address);
        }
    }, [address.list])
    useEffect(() => {
        console.log(shop.formData.price ,formData.num,shop.formData.zheKou);
        handleSetFormData('totalPrice',Math.round(shop.formData.price *formData.num* shop.formData.zheKou/10)*100/100)
    }, [formData.num]);
    const handleNumChange = (v) =>{
        handleSetFormData('num', v);
    }
    const handleBuy = () =>{
        Modal.prompt(
            '密码',
            '请输入密码',
            (password)=>{
                handleSetFormData('password',password);
            },
            'secure-text',
            '',
            '请输入密码'
        )
        dispatch({type:'order/insertOrder',payload: formData})
    }
    return (
        <div>
            <NavBar
                mode="light"
                icon={<Icon type="left" />}
                onLeftClick={() => props.history.go(-1)}
            >下单</NavBar>
            {JSON.stringify(formData)}
            <List>
                <List.Item extra={formData.name}>商品名称</List.Item>
                <List.Item extra={formData.singlePriceOld}>商品原价</List.Item>
                <List.Item extra={formData.zheKou!=10?(formData.zheKou+"折"):"无"}>折扣</List.Item>
                <List.Item extra={formData.singlePrice}>商品价格</List.Item>
                <InputItem 
                    style={{textAlign:'right'}} 
                    placeholder="请输入购买数量" 
                    clear
                    value={formData.num}
                    onChange={handleNumChange}>购买数量</InputItem>
                    <Link to="/address">
                        {
                            formData.address != ''?
                            (
                                <List.Item extra={formData.address} wrap>收货地址</List.Item>
                            )
                            :
                            (
                                <List.Item extra="点击设置" arrow="horizontal">地址</List.Item>
                            )
                        }
                    </Link>
            </List>
            <div className="bottom-bar">
                <div className="price">总价格：{formData.totalPrice}</div>
                <div className="buy" onClick={handleBuy}>确认购买</div>
            </div>
        </div>
    )
}

export default connect(({order,address,shop})=>{
    return {order,shop, address}
})(Order)
